/*
    gulp程序命令的说明:
        gulp.src()
            指定要执行gulp压缩规范的文件路径
            读取指定的文件文件内容 准备打包压缩 最终生成新的文件

            *.css       文件名任意 扩展名是css的文件
            *.*         文件名任意 扩展名任意的所有文件
            **          当前文件夹中的所有 文件夹和文件

        .pipe()
            gulp程序执行 函数程序 打包规范的 专门的程序语法
            执行对象就是src()函数 导入的文件内容
            专门和 src()函数 配合使用的
            
        gulp.dest()
            将 文件内容 存储到 指定的文件夹路径 
            文件名 使用原始文件文件名


        gulp.watch(参数1 , 参数2)
            监听规范    
            参数1 要监听的原始文件路径
            参数2 执行的 打包压缩规范名称
                  也就是监听的原始文件,文件容改变 自动执行的打包压缩规范的名称
                  这里是回调函数形式 赋值的必须是 函数名称 没有 小括号

        gulp.series()
            按照顺序执行设定的程序内容

        gulp.parallel()
            同时执行设定的程序内容

*/



// 1, 加载所有需要执行的依赖包

// gulp依赖包
const gulp = require('gulp');

// css依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

// js依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// html依赖包
const htmlmin = require('gulp-htmlmin');

// 删除依赖包i
const del = require('del');

// 服务器依赖包
const webserver = require('gulp-webserver');

// 2, 执行打包规范语法

// (1) css打包规范
const CSSHandler = function(){
    return gulp.src('./src/css/*.css')
           .pipe( autoprefixer() )
           .pipe( cssmin() )
           .pipe( gulp.dest( './dist/css' ) );                        
}  

// (2) js打包规范

// 这里是一个函数名称
const jsHandler = function(){
    return gulp.src( './src/js/*.js' )
           .pipe( babel( {presets:['@babel/env']} ) )
           .pipe( uglify() )
           .pipe( gulp.dest( './dist/js' ) )
}

// 这里是一个字符串形式
// gulp.task( 'jsHandler' , function(){
//     return gulp.src( './src/js/*.js' )
//         .pipe( babel( {presets:['@babel/env']} ) )
//         .pipe( uglify() )
//         .pipe( gulp.dest( './dist/js' ) )
// })  



// (3) html打包规范
const htmlHandler = function(){
    return gulp.src('./src/pages/*.html')
           .pipe( htmlmin({     // 以对象的形式设定html打包规范设定
                removeAttributeQuotes:true,             // 删除属性值中的双引号
                removeComments:true ,                   // 删除注释
                // removeEmptyElements: true ,          // 删除空标签
                removeEmptyAttributes:true,             // 删除空的属性
                removeScriptTypeAttributes:true,        // 删除script标签type属性
                removeStyleLinkTypeAttributes:true,     // 删除style标签link标签type属性
                collapseBooleanAttributes:true,         // 删除布尔属性属性值
                collapseWhitespace:true,                // 删除标签之间的空格
                minifyCSS:true,                         // 内部式css样式压缩
                minifyJS:true,                          // 内部式js代码压缩
           }))
           .pipe( gulp.dest('./dist/pages') )
}

// (4) 图片不需要压缩 直接 存储到对应的文件夹中
const imgHandler = function(){
    return gulp.src('./src/img/*.*').pipe( gulp.dest('./dist/img') );
}

// (5) 其他程序的相关文件 直接 存储到对应的文件夹中
const PHPHandler = function(){
    return gulp.src('./src/server/*.php').pipe( gulp.dest('./dist/server') );
}

// (6) 已经打包过的插件程序 直接 存储到对应的文件夹中
const toolsHandler = function(){
    return gulp.src('./src/tools/**').pipe( gulp.dest('./dist/tools') );
}

// (7) 音频视频等文件 直接 存储到对应的文件夹中

// (8) 设定删除规范
// 因为 gulp中 是有 src()读取 dest()存储 没有删除功能
// 指定删除规范 每次打包之前 先把 上一次 打包的文件 都删除 
// 再 压缩 当前文件的新的压缩文件
const delHandler = function(){
    return del(['./dist']);
}

// (9) 设定服务器规范
// 这个服务器不是真实的服务器
// 这个服务器主要是为了让大家体验什么加 热启动
const webserverHandler = function(){
    return gulp.src('./dist')
           .pipe( webserver({
               host:'127.0.0.1',
               port:'8088',
               open:'./pages/index.html',
               livereload:true,     // 热启动设定 导入文件夹中文件内容有改变 服务器自动刷新显示改变内容
           }) )
}


// 设定监听程序
const watchHandler = function(){
    gulp.watch( './src/css/*.css' , CSSHandler );
    gulp.watch( './src/js/*.js' , jsHandler );
    gulp.watch( './src/pages/*.html' , htmlHandler );
    gulp.watch( './src/img/*.*' , imgHandler );
    gulp.watch( './src/server/*.php' , PHPHandler );
    gulp.watch( './src/tools/**' , toolsHandler );
}




// 设定gulp的默认执行程序
// gulp默认程序执行导出语法
// 设定这个默认导出语法之后 运行gulp程序
// 在 cmd 中 输入 gulp 就可以了
// 不用输入 node gulpfile.js

// 按照顺序执行设定的程序
module.exports.default = gulp.series(
    // 先执行删除规范 删除指定的文件夹
    delHandler,

    // 同时执行程序
    gulp.parallel( CSSHandler , jsHandler , htmlHandler , imgHandler , PHPHandler , toolsHandler),

    // 开启服务器
    webserverHandler,

    // 最后执行监听规范
    watchHandler,
)